<template>
  <div class="menu-list">
    <router-link id="btn" to="/index/roleadd">
      <el-button type="primary">
        <i class="el-icon-circle-plus-outline"></i>添加
      </el-button>
    </router-link>
    <div class="table-box">
      <!-- data表格的数据 -->
      <!-- default-expand-all：默认展开全部 -->
      <!-- tree-props：树形数据 -->
      <!-- row-key：行数据的 Key，用来优化 Table 的渲染； -->
      <!-- <el-table :data="list" row-key="id" :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"> -->
      <el-table :data="tableData" row-key="id">
        <!-- prop：就是每一列对应的数据的字段 -->
        <!-- label：就是每一列对应的标题 -->
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="rolename" label="角色名称"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-if="scope.row.status == 2">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑按钮，需要传id，id是变量，所以需要用作用域插槽 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="edit(scope.row.id)"
            ></el-button>
            <!-- 查看按钮 -->
            <el-button
              type="warning"
              icon="el-icon-star-off"
              circle
              size="mini"
              @click="check(scope.row.id)"
            ></el-button>
            <!-- 删除按钮，需要传id -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看的弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入的是一个函数，使用函数的返回值
import {getRoleList} from '../../http'
export default {
  data() {
    return {
      // 表格中的数据
      tableData: [],
      // 弹窗的可见性
      dialogVisible: false
    };
  },
  // 获取tabledata，渲染页面
  created() {
    this.getTabledata();
  },
  methods: {
    // 获取table的数据
    async getTabledata() {
      // 使用es7的async和await语法，可以将异步请求的代码看做是同步的，代码会严格按照先后顺序，从上到下顺序执行，使用同步的思维解决异步的问题
      let res = await getRoleList();
      this.tableData = res;
    },
    edit(id) {
      // 去编辑页面。使用动态路由，因为每一个菜单要去的页面中的内容都一样
      // 这里还用到了嵌套路由，所以需要将父路由和子路由拼起来
      this.$router.push("/index/role/" + id);
    },
    check(id) {
      // console.log(id);
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    del(id) {
      // 去删除，先弹窗，需要二次确认，点击确认按钮才会真的删除。避免用户误操作
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确定按钮，才能真的发请求
          this.$http.post("/roledelete", { id: id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            // 获取最新的数据,方便更新页面
            this.getTabledata();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.table-box {
  padding-top: 40px;
}
</style>